<template>
  <view class="flex-col page">
    <view class="add">
      <view class="tab">
        <view :class="tab == 0 ? 'active' : ''" @click="changeTab(0)"
          >项目升级</view
        >
        <view :class="tab == 1 ? 'active' : ''" @click="changeTab(1)"
          >项目加钟</view
        >
      </view>
      <view class="upgrade" v-if="tab == 0">
        <view class="h2"
          >将<text class="sname">{{ service.service_name }}</text
          >升级为以下项目：</view
        >
        <view class="view" v-for="(item, index) in addlist">
          <view class="item">
            <image class="img" :src="item.cover"></image>
            <view class="right-view">
              <view>{{ item.service_name }}</view>
              <view>
                <text class="timeico"></text>
                {{ item.duration }}分钟
              </view>
              <view
                >￥<text class="price">{{ item.price }}</text
                >元</view
              >
            </view>
            <view class="buyinfo">
              <view class="price"
                >需补差价 <text>￥{{ item.price - service.price }}</text></view
              >
              <view class="btn" @click="showPay(item)">立即升级</view>
            </view>
          </view>
        </view>
      </view>
      <view class="addclock" v-if="tab == 1">
        <view class="h2"
          >将<text class="sname">{{ service.service_name }}</text
          >加钟为以下项目：</view
        >
        <view class="view" v-for="(item, index) in addlist">
          <view class="item">
            <image class="img" :src="item.cover"></image>
            <view class="right-view">
              <view>{{ item.service_name }}</view>
              <view>
                <text class="timeico"></text>
                {{ item.duration }}分钟
              </view>
              <view
                >￥<text class="price">{{ item.price }}</text
                >元</view
              >
            </view>
            <view class="buyinfo">
              <view class="btn" @click="showPay(item)">立即加钟</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view>
      <u-popup :show="popShow" mode="bottom" :round="10" @close="popup_close">
        <view class="popup">
          <view class="payprice">
            支付:<text class="red">￥{{ payamount }}元</text>
          </view>
          <view class="paytype">
            <radio-group @change="radioChange">
              <label class="item">
                <view class="title">
                  <image
                    src="../../static/images/b17.png"
                    class="image_5"
                  ></image>
                  余额支付(余额:￥{{ Number(user.balance) }})
                </view>
                <view class="riado">
                  <radio
                    value="1"
                    :checked="payType == 1 ? true : false"
                    color="rgb(56, 152, 124)"
                  />
                </view>
              </label>
              <label class="item">
                <view class="title">
                  <image
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844612334581390.png"
                    class="image_5"
                  ></image>
                  微信支付
                </view>
                <view class="riado">
                  <radio
                    value="4"
                    :checked="payType == 4 ? true : false"
                    color="rgb(56, 152, 124)"
                  />
                </view>
              </label>
            </radio-group>
          </view>

          <view class="paybtn">
            <view class="qx" @click="popup_close">取消</view>
            <view v-if="isPay" class="ok" @tap.stop="onMultClick(toPay)"
              >立即支付</view
            >
            <view
              v-else
              class="flex-col items-center text-wrapper_6"
              style="background-color: rgb(189, 255, 222)"
            >
              <text>支付中……</text>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
let that;

export default {
  data() {
    return {
      tab: 0,
      ordid: "",
      user: {},
      service: {},
      addlist: [],
      popShow: false,
      payamount: 0,
      selItem: {},
      payType: 1,
      onClick: true,
      balance: 0,
      isPay: true,
      order_form: "",
    };
  },
  onLoad(e) {
    that = this;
    this.tab = e.tab ? e.tab : 0;
    this.ordid = e.ordid ? e.ordid : null;
    this.loadServ();
    this.changeTab(this.tab);
    this.getRecharge();
  },
  onShow() {
    const sn = uni.getStorageSync("add_recharge_sn");
    // console.log('sn', sn);
    if (sn && this.order_form) {
      this.count = 3;
      this.checkOrderStatus(sn, this.order_form);
    }
  },
  methods: {
    async checkOrderStatus(order_sn, form) {
      const res = await this.$http.post("api/wxapp/check_order_status", {
        order_sn,
        form,
      });
      if (res.code === 1) {
        // 支付成功了
        uni.removeStorageSync("recharge_sn");
        clearTimeout(this.order_time);
        // 跳转到 成功页面
        uni.redirectTo({
          url: "/bundle/pages/pay_success/pay_success",
        });
        return;
      }
      this.isPay = true;
      this.popShow = false;
      clearTimeout(this.order_time);
      uni.removeStorageSync("recharge_sn");
      uni.showToast({
        title: "支付失败",
        icon: "error",
      });
    },
    // 获取账户余额
    getRecharge() {
      this.$http.post("api/recharge/index").then((res) => {
        this.balance = Number(res.balance);
      });
    },
    changeTab(e) {
      this.tab = e;
      this.loadData(e);
      this.getUserinfo();
      // this.getWx();
    },
    loadServ() {
      this.$http
        .post("api/order/orderSpec", {
          order_sn: that.ordid,
        })
        .then((res) => {
          that.service = res;
        });
    },
    loadData(id = 0) {
      const url = ["api/order/upgradeList", "api/order/newClockList"];
      this.$http
        .post(url[id], {
          order_sn: that.ordid,
        })
        .then((res) => {
          that.addlist = res;
        });
    },
    getUserinfo() {
      this.$http.post("api/user/userInfo").then((res) => {
        this.user = res;
      });
    },
    popup_close() {
      this.popShow = false;
    },
    showPay(item) {
      if (this.tab == 0) {
        this.payamount = item.price - this.service.price;
      } else {
        this.payamount = item.price;
      }
      this.selItem = item;
      this.popShow = true;
    },
    radioChange(e) {
      const v = e.detail.value;
      this.payType = v;
    },
    toPay() {
      this.isPay = false;
      const url = ["api/order/newUpgradeOrder", "api/order/newCreateClock"];
      this.$http
        .post(url[that.tab], {
          order_sn: this.ordid,
          spec_id: this.selItem.service_id,
        })
        .then((res) => {
          const order_sn = res;
          const from = that.tab == 0 ? "upgrade" : "clock";
          const pay_way = that.payType;
          this.order_form = from;
          that.wxPay(order_sn, from, pay_way);
        });
    },
    // 初始化H5支付
    getWx() {},
    fill(a) {
      return 10 > a ? "0" + (0 | a) : a;
    },
    // 支付 功能
    wxPay(order_sn, form, pay_way) {
      let date = new Date();
      let create_time =
        date.getFullYear() +
        "-" +
        this.fill(Number(date.getMonth()) + 1) +
        "-" +
        this.fill(date.getDate()) +
        this.fill(date.getHours()) +
        ":" +
        this.fill(date.getMinutes()) +
        ":" +
        this.fill(date.getDate());

      uni.setStorageSync("order_info", {
        create_time,
        order_sn: order_sn,
        pay_type: pay_way == 4 ? "微信支付" : "现金支付",
        pay_money: this.payamount,
      });

      if (pay_way == 1 && this.payamount > Number(this.balance)) {
        uni.showToast({
          icon: "none",
          title: "账户余额不足",
        });
        this.isPay = true;
        return;
      }

      // console.log(order_sn, form, pay_way);
      // return

      if (pay_way == 1) {
        // 余额
        this.$http
          .post("api/pay/pay", { order_sn, form, pay_way })
          .then((res) => {
            uni.redirectTo({
              url: "/bundle/pages/pay_success/pay_success",
            });
          });
      } else {
        // 微信 小程序
        uni.setStorageSync("add_recharge_sn", order_sn);
        this.$http
          .post("api/pay/pay", { order_sn, pay_way, form })
          .then((res) => {
            plus.runtime.openURL(res.url_link);
          });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.add {
  padding: 55px 15px 0;
  .tab {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;
    display: flex;
    justify-content: space-between;
  }
  .tab view {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    transition-duration: 0.5s;
    flex: 1 1 0%;
    width: auto;
    color: rgb(48, 49, 51);
    text-align: center;
    position: relative;
  }
  .tab .active {
    font-weight: bold;
    color: rgb(56, 152, 124);
  }
  .tab .active::before {
    position: absolute;
    content: " ";
    width: 20px;
    background-color: rgb(56, 152, 124);
    height: 3px;
    opacity: 1;
    border-radius: 3px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .upgrade .h2,
  .addclock .h2 {
    line-height: 48px;
    color: #333;
    font-size: 14px;
    .sname {
      color: rgb(56, 152, 124);
    }
  }
  .upgrade,
  .addclock {
    .view {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 14px;
      margin-bottom: 10px;
      .item {
        flex: 1;
        padding: 7px;
        display: flex;
        position: relative;
        .img {
          width: 100px;
          height: 77px;
        }
        .right-view {
          flex: 1;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          .timeico {
            background-image: url("");
            width: 13px;
            height: 13px;
            background-size: 100% 100%;
            display: inline-block;
          }
        }
        .right-view > view:nth-child(2) {
          color: #727272;
          font-size: 12px;
          flex: 1;
          display: flex;
          align-items: center;
        }
        .right-view > view:nth-child(2) > image {
          width: 13px;
          height: 13px;
        }
        .right-view > view:nth-child(3) {
          display: flex;
          align-items: center;
          color: #ff6100;
          font-size: 12px;
          .price {
            font-size: 16px;
          }
        }
        .buyinfo {
          position: absolute;
          right: 8px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          .price {
            color: #ff6100;
            font-size: 12px;
            margin-bottom: 16px;
          }
          .price > text {
            font-size: 14px;
          }
          .btn {
            width: 78px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 13px;
            background-color: rgb(56, 152, 124);
            border-radius: 6px;
          }
        }
      }
    }
  }
}
.popup {
  padding: 12px 16px;
}

.paytype {
  margin-top: 12px;
  background-color: white;
  border-radius: 12px;
  .image_5 {
    width: 17px;
    height: 17px;
  }
}

.paytype label {
  padding: 0;
  margin: 0 !important;
  display: block;
}
.paytype .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  padding: 12px 0;
}
.paytype .item:nth-child(1) {
  border-bottom: 1px solid #f8f8f8;
}
.paytype .item:nth-child(2) {
  padding-top: 8px;
}
.paytype .title {
  display: flex;
  align-items: center;
}

.paytype .riado {
  font-size: 13px;
  zoom: 0.8;
}
.payprice {
  .red {
    color: #f39735;
    font-size: 24px;
  }
}
.paybtn {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  .qx {
    background-color: #ccc;
    color: #fff;
    max-width: 120px;
  }
  .ok {
    background-color: #38987c;
    color: #fff;
    margin-left: 20px;
  }
}
.paybtn > view {
  height: 44px;
  text-align: center;
  flex: 1;
  line-height: 44px;
  border-radius: 22px;
}
</style>
